<div class="layui-colla-item">

    <h2 class="layui-colla-title">search</h2>

    <div class="layui-colla-content ">

        <div class="layui-row">

            <div class="layui-card">

            <div class="layui-card-header layui-bg-gray layui-bottom">

                <a href="javascript:;" class="layui-btn layui-btn-xs batch-delete add-line" ><i class="layui-icon">&#xe654;</i>添加一行</a>

            </div>

            <div class="layui-card-body layui-nopadding ">

                <table  class="layui-table layui-nomargin table-bordered">

                    <thead> 

                        <tr>

                            <th>标题</th>

                            <th>控件名</th>

                            <th>控件类型</th>

                            <th>引入html</th>

                            <th>placeholder</th>

                            <th>是否显示</th>

                            <th>显示类型</th>

                            <th>默认值</th>

                            <th>显示项</th>

                            <th>查询规则</th>

                            <th>权限</th>

                            <th>操作</th>

                        </tr>

                    </thead>

                    <tbody id="search-sort">

                    </tbody>

                </table>

            </div>

            </div>

        </div>

    </div>

</div>

<script src="__STATIC__/js/jquery-ui/jquery-ui.js"></script>

<script type="text/javascript">

;!function(){

    var fixHelper = function(e, ui) {

        ui.children().each(function() {

            $(this).width($(this).width()); //在拖动时，拖动行的cell（单元格）宽度会发生改变。在这里做了处理就没问题了

        });

        return ui;

    };

    $( "#search-sort" ).sortable({

        opactiy:0.6,

        revert:true,

        axis: 'y',

        helper: fixHelper,

        cursor:"move",

        start:function(e, ui){

            ui.item.css({"background":"#696969"}); //拖动时的行，要用ui.helper

            return ui;

        },

        stop:function(e, ui){

            var res = new Object();

            var n = 1;

            $('#search-sort tr').each(function(i){ // 遍历 tr

                var a = $(this).children();//获取每一行

                var arr =a[1].innerText;//取得第三列的值

                res[arr] = n;

                n++;

            });

            resData1 = JSON.stringify(res);

            ui.item.css({"background":"#fff"});

            return ui;

        },

        update:function(e, ui){

                var new_sort = [];

                $("#search-sort").find('.key').each(function(i){

                    $(this).val(i);

                    new_sort.push($(this).val());

                });

            }

    });

    //显示数据

    $.ajax({

        url:"{:cmf_plugin_url('ModuleConfig://table_config/getConfig')}?tag=search",

        data:$('#search-form').serialize(),

        success:function(data){

            if (data.code == 1) {

                var tables = $('.table-bordered tbody');

                var ctrl_type = {:json_encode($ctrl_type)};

                var htms = {:json_encode($html)}; //html选择

                $.each(data.data,function(k,v){

                    //控件类型选中状态

                    var ctp = '<select name="form[search][fields]['+k+'][ctrl_type]">';

                    $.each(ctrl_type,function(a,b){

                        if (a == v.ctrl_type) {

                            var s = 'selected';

                        } else {

                            var s = '';

                        }

                        ctp += '<option value="'+a+'" '+s+'>'+b+'</option>';

                    })

                    ctp += '</select>';

                    //引入html选择

                    var ht = '<select name="form[search][fields]['+k+'][html]"><option value="" >无</option>';

                    $.each(htms,function(a,b){

                        var bs = b.add;

                        if (bs == null) {

                            return true;

                        }

                        if (b.name == v.html) {

                            var s = 'selected';

                        } else {

                            var s = '';

                        }

                        ht += '<option value="'+b.name+'" '+s+'>'+b.name+'</option>';

                    })

                    ht += '</select>';

                    //开关状态

                    if (v.is_show == 1) {

                        d = 'checked';

                    } else {

                        d = '';

                    }

                    //显示状态

                    var show_type = '<select name="form[search][fields]['+k+'][show_type]">';

                    if (v.show_type == 1) {

                        show_type += '<option value="0" >无</option><option value="1" selected>查表</option><option value="2" >固定内容</option>';

                    } else if (v.show_type == 2) {

                        show_type += '<option value="0" >无</option><option value="1" >查表</option><option value="2" selected>固定内容</option>';

                    } else if (v.show_type == 0) {

                        show_type += '<option value="0" selected>无</option><option value="1" >查表</option><option value="2" >固定内容</option>';

                    }

                    if (v.permission == 1){
                        per = 'checked';
                    }else{
                        per = '';
                    }                    

                    var html = $(

                        '<tr>'+

                        '<input class="key" type="hidden" name="form[search][fields]['+k+'][sort]" value="'+v.sort+'">'+

                        '<td><input type="text" name="form[search][fields]['+k+'][title]" class="layui-input" value="'+v.title+'"></td>'+

                        '<td><input type="text" name="form[search][fields]['+k+'][ctrl_name]" class="layui-input" value="'+v.ctrl_name+'"></td>'+

                        '<td>'+ctp+'</td>'+

                        '<td>'+ht+'</td>'+

                        '<td><input type="text" name="form[search][fields]['+k+'][placeholder]" class="layui-input" value="'+v.placeholder+'"></td>'+

                        '<td>'+

                            '<input type="hidden" name="form[search][fields]['+k+'][is_show]" value="2">'+

                            '<input type="checkbox" name="form[search][fields]['+k+'][is_show]" lay-skin="switch"  lay-text="ON|OFF" value="1" '+d+'>'+

                        '</td>'+

                        '<td>'+show_type+'</td>'+

                        '<td>'+

                            '<input type="text" name="form[search][fields]['+k+'][default]" class="layui-input" value="'+v.default+'">'+

                        '</td>'+

                        '<td>'+

                            '<textarea placeholder="" name="form[search][fields]['+k+'][option]" onchange="checkjson(this)" class="layui-textarea">'+v.option+'</textarea>'+

                        '</td>'+

                        '<td>'+

                            '<textarea placeholder="" name="form[search][fields]['+k+'][rule]" class="layui-textarea">'+v.rule+'</textarea>'+

                        '</td>'+

                        '<td>'+

                            '<input type="hidden" name="form[search][fields]['+k+'][permission]" value="0">'+

                            '<input type="checkbox" name="form[search][fields]['+k+'][permission]"  lay-skin="switch" '+per+' lay-text="ON|OFF" value="1">'+

                        '</td>'+                         

                        '<td>'+

                            '<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="deletetr(this)" title="移除后请点击保存"><i class="layui-icon">&#xe640;</i></button>'+

                        '</td>'+

                    '</tr>'

                    );

                    html.appendTo(tables);

                    form.render();

                })

            }

        }

    });

  var layer = layui.layer

    ,form = layui.form;

    var common_n = 'fsadfdsaf';

    var i = 100;

    //添加一行

    $('.add-line').on('click',function(){

        // $('.table-bordered tbody tr').each(function(){

        //     common_n = $(this).closest('tr').find('input[name="title"]').val();

        // })

        // if (common_n.length > 0){

            var tables = $('.table-bordered tbody');

            var html = $(

                '<tr>'+

                '<td><input type="text" name="form[search][fields]['+i+'][title]" class="layui-input"></td>'+

                '<td><input type="text" name="form[search][fields]['+i+'][ctrl_name]" class="layui-input"></td>'+

                '<td>'+

                    '<select name="form[search][fields]['+i+'][ctrl_type]">'+

                        '<foreach name="ctrl_type" item="ty" key="k">'+

                            '<option value="{$k}">{$ty}</option>'+

                        '</foreach>'+

                    '</select>'+

                '</td>'+

                '<td>'+

                    '<select name="form[search][fields]['+i+'][html]">'+

                        '<foreach name="html" item="ty" key="k">'+

                            '<option value="">无</option>'+

                            '<option value="{$ty.name}">{$ty.name}</option>'+

                        '</foreach>'+

                    '</select>'+

                '</td>'+

                '<td><input type="text" name="form[search][fields]['+i+'][placeholder]" class="layui-input"></td>'+

                '<td>'+

                    '<input type="hidden" name="form[search][fields]['+i+'][is_show]" value="2">'+

                    '<input type="checkbox" name="form[search][fields]['+i+'][is_show]" lay-skin="switch"  lay-text="ON|OFF" value="1" >'+

                '</td>'+

                '<td>'+

                    '<select name="form[search][fields]['+i+'][show_type]">'+

                        '<option value="0">无</option>'+

                        '<option value="1">查表</option>'+

                        '<option value="2">固定内容</option>'+

                    '</select>'+

                '</td>'+

                '<td>'+

                    '<input type="text" name="form[search][fields]['+i+'][default]" class="layui-input ">'+

                '</td>'+

                '<td>'+

                    '<textarea placeholder="请输入内容" name="form[search][fields]['+i+'][option]" onchange="checkjson(this)" class="layui-textarea "></textarea>'+

                '</td>'+

                '<td>'+

                    '<textarea placeholder="请输入内容" name="form[search][fields]['+i+'][rule]" class="layui-textarea"></textarea>'+

                '</td>'+

                '<td>'+

                    '<input type="hidden" name="form[search][fields]['+i+'][permission]" value="0">'+

                    '<input type="checkbox" name="form[search][fields]['+i+'][permission]"  lay-skin="switch" lay-text="ON|OFF" value="1">'+

                '</td>'+                 

                '<td>'+

                    '<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="deletetr(this)" title="移除后请点击保存"><i class="layui-icon">&#xe640;</i></button>'+

                '</td>'+

            '</tr>'

            );

            html.appendTo(tables);

            i+=1;

            form.render();

        // } else {

        //     layer.msg('请填写内容！',{icon:2,time:1000});

        // }

    })

}();

function deletetr(t){

    $(t).parent().parent().remove();

}

function checkjson( _this )

{

    $.ajax({

        url:"{:cmf_plugin_url('ModuleConfig://table_config/checkJson')}",

        data:{val:$(_this).val()},

        type:'post',

        success:function(data){

            console.log(data);

            if (data.code != 1) {

                layer.msg(data.msg,{icon:2,time:1500});

            } else {

            }

        }

    })

}

</script>